<template>
    <div class="dervice-content flex-content">
        <div class="dervice-left flex-base">
            <el-row :gutter="20">
                <el-col v-for="(item, index) in derviceList" :key="index" :span="12" class="dervice-left-content">
                    <div class="dervice-left-item flex-content cup">
                        <div class="dervice-img">
                            <img :src="'img/dervice/' + item.img + '.png'" />
                        </div>
                        <div class="dervice-text flex-base">
                            <div>{{ item.title }}</div>
                            <div v-for="(sitem, sindex) in item.textList" :key="sindex">{{ sitem }}</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="dervice-right">
            <div class="city-icon">
                <img src="https://www.wendu.com/wdhome/img/ic-campus.dfd84ae.png" />
                <span>销售地区</span>
            </div>
            <div v-for="(item, index) in cityList" :key="index" class="city-div cup">{{ item }}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { ref } from 'vue'
    import { DerviceListInterface } from '@/types/home/HomeInterface'
    const derviceList = ref<DerviceListInterface[]>([
        {
            title: '测试数据1',
            img: '1',
            textList: []
        },
        {
            title: '测试数据2',
            img: '1',
            textList: []
        },
        {
            title: '测试数据3',
            img: '1',
            textList: []
        },
        {
            title: '测试数据4',
            img: '1',
            textList: []
        }
    ])
    const cityList = ref<string[]>(Array.from({ length: 10 }, () => '北京'))
</script>
<style scoped lang="less">
    .dervice-content {
        width: 100%;
        .dervice-left {
            .dervice-left-content {
                margin: 10px 0;
                .dervice-left-item {
                    padding: 20px;
                    border-radius: 12px;
                    justify-content: space-between;
                    background-color: #fff;
                    .dervice-img {
                        width: 170px;
                        height: 150px;
                        img {
                            width: 100%;
                            height: 100%;
                            transition: transform 0.5s ease-in-out;
                        }
                    }
                    .dervice-img:hover {
                        img {
                            transform: scale(1.2);
                            transition: transform 0.5s ease-in-out;
                        }
                    }
                    .dervice-text {
                        flex: 1;
                    }
                }
                .dervice-left-item:hover {
                    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
                    transition: all 0.3s;
                }
            }
        }
        .dervice-right {
            margin: 10px 0 10px 10px;
            padding: 10px 20px;
            width: 500px;
            border: 3px solid @theme-color;
            border-radius: 16px;
            box-sizing: content-box;
            .city-icon {
                margin-top: 10px;
                float: left;
                background: @theme-color;
                border-radius: 8px;
                padding: 8px;
                color: #fff;
                display: inline-block;
                img {
                    height: 44px;
                    color: @theme-color;
                }
            }
            .city-div {
                float: left;
                font-size: 16px;
                display: inline-block;
                border: 1px solid transparent;
                padding: 5px 10px;
                border-radius: 4px;
                margin: 10px 5px 0 5px;
                overflow: hidden;
                text-align: center;
            }
            .city-div:hover {
                border: 1px solid @theme-color;
                color: #ffffff;
                background: @theme-color;
            }
        }
    }
</style>
